<!--
 * @Author: ShiJunJie
 * @Date: 2022-03-18 10:23:53
 * @LastEditors  : ShiJunJie
 * @LastEditTime : 2022-04-14 17:08:52
 * @Descripttion: 多语言切换组件
-->
<template>
  <a-dropdown>
    <template #overlay>
      <a-menu>
        <a-menu-item v-for="lang in langs" @click="handleSubmit(lang.value)">
          {{ lang.label }}
        </a-menu-item>
      </a-menu>
    </template>
    <a-button type="text">
      <Icon v-if="props.type === 'icon'" icon="ic:baseline-language" style="font-size: 18px" />
      <span v-else>选择语言</span>
    </a-button>
  </a-dropdown>
</template>

<script setup lang="ts">
import type { LangType } from '@/plugins/components/vue-i18n';
import { LangList } from '@/plugins/components/vue-i18n';
const { locale } = useI18n();

const props = defineProps({
  type: {
    type: String,
    default: 'icon'
  }
});

const langs: LangType[] = [...LangList];
function handleSubmit(lang: string) {
  localStorage.setItem('app-locale', lang);
  locale.value = lang; // 要切换的语言
}
</script>

<style lang="scss" scoped></style>
